<!DOCTYPE html>
<html lang="zh">

<head>
	<th:block th:include="include :: header('项目概况')" />
	<link href="../static/layui/css/layui.css" th:href="@{/layui/css/layui.css}" rel="stylesheet" />
	<link href="../static/layui/css/dropdown.css" th:href="@{/layui/css/dropdown.css}" rel="stylesheet" />
	<link href="../static/css/projectDetail.css" th:href="@{/css/projectDetail.css}" rel="stylesheet" />
</head>

<body class="fixed-sidebar full-height-layout gray-bg">
	<!-- 头部导航 链接 -->
	<div class="row border-bottom white-bg dashboard-header headerNav">
		<div class="col-sm-1 logo">
			<div class="icon hidden-xs">
				<i class="fa fa-file-powerpoint-o"></i>
			</div>
			<div class="progressBar">
				<i>00.00%</i>
				<!-- style和 aria-valuenow里的数字代表进度 -->
				<div class="layui-progress" style="height: 5px;">
					<div class="layui-progress-bar " lay-percent="00.00%" style="width: 00%;"></div>
				</div>
			</div>
		</div>
		<div class="col-sm-11 navBar">
			<th:block th:include="include :: projectYyBar" />
		</div>
	</div>
	<!-- 主体部分 -->
	<div class="wrapper wrapper-content">
		<div class="row"> <!-- 项目信息 -->
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="col-sm-9">
						<table class="infoTable">
							<tbody>
								<tr>
									<td class="title">客户</td>
									<td th:text="${gcProject.customerName}">&nbsp;</td>
									<td class="title">项目类别</td>
									<td th:with="type=${@dict.getLabel('sj_proType','__${gcProject.proType}__')}" th:text="${type}">&nbsp;</td>
									<td class="title">项目状态</td>
									<td><i class="cube blue"><span th:with="type=${@dict.getLabel('sj_contract_status','__${gcProject.status}__')}" th:text="${type}">&nbsp;</span></i></td>
									<td class="title">创建时间</td>
									<td th:text="${#dates.format(gcProject.createAt,'yyyy-MM-dd HH:mm:ss')}">&nbsp;</td>
									<td class="title">更新时间</td>
									<td th:text="${#dates.format(gcProject.createAt,'yyyy-MM-dd HH:mm:ss')}">&nbsp;</td>
								</tr>
								<tr>
									<td class="title">项目董事</td>
									<td th:text="${gcProject.proDsz}">&nbsp;</td>
									<td class="title">商务经理</td>
									<td th:text="${gcProject.proSwjl}">&nbsp;</td>
									<td class="title">方案主创</td>
									<td th:text="${gcProject.proFazc}">&nbsp;</td>
									<td class="title">项目负责人</td>
									<td th:text="${gcProject.proFzr}">&nbsp;</td>
								</tr>
								<tr>
									<td class="title">工作内容</td>
									<td th:text="${gznr}" colspan="9">&nbsp;</td>
								</tr>
							</tbody>
						</table>
					</div>

<!-- 					<div class="col-sm-3 buttonBox"> -->
<!-- 						<button class="btn btn-primary"><i class="fa fa-pencil-square-o"></i> 编辑</button> -->
<!-- 						<button class="btn btn-success"><i class="fa fa-gear"></i> 设置</button> -->
<!-- 					</div> -->
				</div>
			</div>
		</div>

		<div class="row"> <!-- 里程碑 -->
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<h3><i class="fa fa-flag"></i> 里程碑 <i class="percentTag">[[${milestone}]]/[[${milestonesize}]]</i></h3>
					<a href="#"> <!-- 链接到里程碑页面 -->
						<div class="milestone">
							<ul>
								<li th:each="milestone:${milestonelis}"> <!-- 遍历此li -->
									<div th:if="${milestone.status} eq 0" class="info gray"> <!-- 状态框 green是绿色 gray是灰色-->
										<div class="milestoneBox">
											<i class="icon fa fa-flag"></i> <!--图标 fa-check 是 √  fa-flag是旗子-->
											<h4 th:text="${milestone.name}">&nbsp;</h4>
<!-- 											<p><i class="fa fa-calendar"></i> 计划 <em th:text="${#dates.format(milestone.pstartAt, 'yyyy-MM-dd')}" >&nbsp;</em></p> -->
<!-- 											<p><i class="fa fa-calendar"></i> 实际 <em th:text="${#dates.format(milestone.pendAt, 'yyyy-MM-dd')}" >&nbsp;</em></p> -->
										</div>
										<div class="milestoneState green">未完成 <i class="fa fa-lightbulb-o"></i></div>
										<!-- 状态框 green和red代表颜色-->
									</div>
									<div th:if="${milestone.status} eq 0" class="arrow"> <i class="fa fa-long-arrow-right"></i></div>
									<!-- 箭头 带green是绿色 不带是灰色-->
									
									<div th:if="${milestone.status} eq 1" class="info green"> <!-- 状态框 green是绿色 gray是灰色-->
										<div class="milestoneBox">
											<i class="icon fa fa-check"></i> <!--图标 fa-check 是 √  fa-flag是旗子-->
											<h4 th:text="${milestone.name}">&nbsp;</h4>
<!-- 											<p><i class="fa fa-calendar"></i> 计划 <em th:text="${#dates.format(milestone.pstartAt, 'yyyy-MM-dd')}" >&nbsp;</em></p> -->
<!-- 											<p><i class="fa fa-calendar"></i> 实际 <em th:text="${#dates.format(milestone.pendAt, 'yyyy-MM-dd')}" >&nbsp;</em></p> -->
										</div>
										<div class="milestoneState green">完成 <i class="fa fa-lightbulb-o"></i></div>
										<!-- 状态框 green和red代表颜色-->
									</div>
									<div th:if="${milestone.status} eq 1" class="arrow green"> <i class="fa fa-long-arrow-right"></i></div>
									<!-- 箭头 带green是绿色 不带是灰色-->
								</li>
								
								<li th:if="${gcProject.status == 7}"> <!-- 遍历此li -->
									<div class="info green"> <!-- 状态框 green是绿色 gray是灰色-->
										<div class="milestoneBox">
											<i class="icon fa fa-check"></i> <!--图标 fa-check 是 √  fa-flag是旗子-->
											<h4>项目完成</h4>
										</div>
										<div class="milestoneState green">完成 <i class="fa fa-lightbulb-o"></i></div>
										<!-- 状态框 green和red代表颜色-->
									</div>
								</li>
								
								<li th:if="${gcProject.status != 7}"> <!-- 遍历此li -->
									<div class="info gray"> <!-- 状态框 green是绿色 gray是灰色-->
										<div class="milestoneBox">
											<i class="icon fa fa-flag"></i> <!--图标 fa-check 是 √  fa-flag是旗子-->
											<h4>项目完成</h4>
										</div>
										<div class="milestoneState green">未完成 <i class="fa fa-lightbulb-o"></i></div>
										<!-- 状态框 green和red代表颜色-->
									</div>
								</li>
							
							</ul>
						</div>
					</a>

				</div>
			</div>
		</div>

		<div class="row chart" th:if="${flag} eq 1"> <!-- 视图数据 -->
<!-- 			<div class="col-sm-4"> -->
<!-- 				<a href="#"> 链接到视图页面 -->
<!-- 					<div class="ibox float-e-margins"> -->
<!-- 						<div class="numInfo"> 数字信息  numInfo是整行 numInfo half是一行两个 -->
<!-- 							<h3>项目预估工时</h3> -->
<!-- 							<p class="blue">67426</p> 用blue green red black来控制数字颜色 -->
<!-- 						</div> -->

<!-- 						<div class="numInfo"> -->
<!-- 							<h3>项目已用工时 <i class="fa fa-refresh"></i></h3> -->
<!-- 							<p class="green">67426</p> -->
<!-- 							<div class="layui-progress"> 百分比 -->
<!-- 								<div class="layui-progress-bar " lay-percent="0.46%" style="width: 0.46%;"></div> -->
<!-- 							</div> -->
<!-- 							<p class="progress-text">0.46%</p> -->
<!-- 						</div> -->

<!-- 						<div class="numInfo"> -->
<!-- 							<h3>项目剩余工时</h3> -->
<!-- 							<p class="black">67118.5</p> -->
<!-- 						</div> -->
<!-- 					</div> -->
<!-- 				</a> -->
<!-- 			</div> -->
			<div class="col-sm-6">
				<a href="#"> <!-- 链接到视图页面 -->
					<div class="ibox float-e-margins">
						<div class="numInfo"> <!-- 数字信息  numInfo是整行 numInfo half是一行两个-->
							<h3>实际费用支出</h3>
							<p class="green">[[${sjfy}]]</p> <!-- 用blue green red black来控制数字颜色 -->
						</div>

						<div class="numInfo">
							<h3>实际费用付款支出</h3>
							<p class="green">[[${sjfkfy}]]</p>
						</div>

					</div>
				</a>
			</div>
			<div class="col-sm-6">
				<div class="ibox float-e-margins">
					<div class="numInfo"> <!-- 数字信息  numInfo是整行 numInfo half是一行两个-->
						<h3>项目计划收入款项</h3>
						<p class="blue">[[${pojhsrkx}]]</p> <!-- 用blue green red black来控制数字颜色 -->
					</div>

					<div class="numInfo half"> <!-- 数字信息  numInfo是整行 numInfo half是一行两个-->
						<h3>预计开票金额</h3>
						<p class="green">[[${yjkpje}]]</p>
					</div>
					<div class="numInfo half">
						<h3>已开发票金额</h3>
						<p class="green">[[${ykfpje}]]</p>
					</div>

					<div class="numInfo half">
						<h3>累计到款金额</h3>
						<p class="green">[[${ljdkje}]]</p>
						<div class="layui-progress"> <!--百分比-->
							<div class="layui-progress-bar " lay-percent="0%" style="width: 0%;"></div>
						</div>
						<p class="progress-text">0.00%</p>
					</div>
					<div class="numInfo half">
						<h3>应收金额</h3>
						<p class="green">[[${ysje}]]</p>
						<div class="layui-progress"> <!--百分比-->
							<div class="layui-progress-bar " lay-percent="100%" style="width: 100%;"></div>
						</div>
						<p class="progress-text">100.00%</p>
					</div>


				</div>
			</div>
		</div>

<!-- 		<div class="row contrast"> 基准对比 -->
<!-- 			<div class="col-sm-12"> -->
<!-- 				<div class="ibox float-e-margins"> -->
<!-- 					<h3><i class="fa fa-table"></i> 项目基准对比</h3> -->

<!-- 					<div class="tableBox"> -->
<!-- 						<table class="info-table" border="0"> -->
<!-- 							<thead> -->
<!-- 								<tr> -->
<!-- 									<td></td> -->
<!-- 									<td class="bold center">项目周期</td> -->
<!-- 									<td class="bold right">工时</td> -->
<!-- 									<td class="bold right">人工成本</td> -->
<!-- 									<td class="bold right">费用支出</td> -->
<!-- 								</tr> -->
<!-- 							</thead> -->
<!-- 							<tbody> -->
<!-- 								<tr class="green-bg"> -->
<!-- 									<td class="bold center">基线</td> -->
<!-- 									<td>2023-12-08 ~ 2023-12-31</td> -->
<!-- 									<td class="lg-font right">10</td> -->
<!-- 									<td class="lg-font right">120.00</td> -->
<!-- 									<td class="lg-font right">50.00</td> -->
<!-- 								</tr> -->
<!-- 								<tr class="highlight"> -->
<!-- 									<td class="bold center">计划</td> -->
<!-- 									<td>2023-02-08 ~ 2025-02-15</td> -->
<!-- 									<td class="lg-font right">67426</td> -->
<!-- 									<td class="lg-font right">6,746,324.00</td> -->
<!-- 									<td class="lg-font right">0.00</td> -->
<!-- 								</tr> -->
<!-- 								<tr> -->
<!-- 									<td class="bold center">实际</td> -->
<!-- 									<td>- ~ -</td> -->
<!-- 									<td class="lg-font right">307.5</td> -->
<!-- 									<td class="lg-font right">41,075.00</td> -->
<!-- 									<td class="lg-font right">93,313.00</td> -->
<!-- 								</tr> -->
<!-- 								<tr class="subtotal"> -->
<!-- 									<td class="center">实际 / 计划</td> -->
<!-- 									<td></td> -->
<!-- 									<td class="lg-font right">0.46%</td> -->
<!-- 									<td class="lg-font right">0.61%</td> -->
<!-- 									<td class="lg-font right">0.00%</td> -->
<!-- 								</tr> -->
<!-- 							</tbody> -->
<!-- 						</table> -->
<!-- 					</div> -->
<!-- 				</div> -->
<!-- 			</div> -->
<!-- 		</div> -->
	</div>
	<!-- import layui -->
	<th:block th:include="include :: footer" />
	<script th:src="@{/layui/dropdown.js?v=20250801}"></script>
	<th:block th:include="include :: projectYyDetail" />
	<!--选中导航 这段js放在每个页面末尾-->
	<script>
		$(()=>{
			setTimeout(()=>{
				selectedNav(0)//第N个被选中 0即
			},100)
		})
		
		function selectedNav(index){
			$('ul.layui-nav').find('.layui-nav-item').eq(index).addClass('layui-this');
		}
	</script>
</body>

</html>